<template>
  <div style="width: 100%;height: 100%;">
    <!--  -->
  </div>
</template>
<script>
// 按需引入 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// import echarts from 'echarts/lib/echarts';
// 引入柱状图
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/grid')
require('echarts/lib/component/tooltip') // 引入图例组件
require('echarts/lib/component/title')// 引入标题组件
require('echarts/lib/component/polar')
require('echarts/lib/component/legend') // 引入图例组件

export default {
  name: 'Dashboard',
  props: {
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // this.chart = echarts.init(document.getElementById('pie1'));
      this.chart = echarts.init(this.$el);
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 'right',
          top: 'middle',
          align: 'left',
          textStyle: {
            lineHeight: 40
          }
        },
        series: [
          {
            z: 1,
            type: "pie",
            left: '-30%',
            radius: ["76%", "76%"],
            hoverAnimation: false,
            itemStyle: {
              color: "rgba(66, 66, 66, .0)",
              borderWidth: 1,
              borderColor: "#999",
            },
            data: [100],
          },
          {
            z: 2,
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '70%'],
            left: '-30%',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };
      // option = {
      //   z: 2,
      //   legendHoverLink: !0,
      //   colorBy: "data",
      //   center: ["50%", "50%"],
      //   radius: [0, "75%"],
      //   clockwise: !0,
      //   startAngle: 90,
      //   minAngle: 0,
      //   minShowLabelAngle: 0,
      //   selectedOffset: 10,
      //   percentPrecision: 2,
      //   stillShowZeroSum: !0,
      //   left: 0,
      //   top: 0,
      //   right: 0,
      //   bottom: 0,
      //   width: null,
      //   height: null,
      //   label: {
      //     rotate: 0,
      //     show: !0,
      //     overflow: "truncate",
      //     position: "outer",
      //     alignTo: "none",
      //     edgeDistance: "25%",
      //     bleedMargin: 10,
      //     distanceToLabelLine: 5
      //   },
      //   labelLine: {
      //     show: !0,
      //     length: 15,
      //     length2: 15,
      //     smooth: !1,
      //     minTurnAngle: 90,
      //     maxSurfaceAngle: 90,
      //     lineStyle: {
      //       width: 1,
      //       type: "solid"
      //     }
      //   },
      //   itemStyle: {
      //     borderWidth: 1,
      //     borderJoin: "round"
      //   },
      //   showEmptyCircle: !0,
      //   emptyCircleStyle: {
      //     color: "lightgray",
      //     opacity: 1
      //   },
      //   labelLayout: {
      //     hideOverlap: !0
      //   },
      //   emphasis: {
      //     scale: !0,
      //     scaleSize: 5
      //   },
      //   avoidLabelOverlap: !0,
      //   animationType: "expansion",
      //   animationDuration: 1e3,
      //   animationTypeUpdate: "transition",
      //   animationEasingUpdate: "cubicInOut",
      //   animationDurationUpdate: 500,
      //   animationEasing: "cubicInOut"
      // }
      this.setOptions(option);

      // var callback = () => {
      //   O(e, r);
      //   function e() {
      //     return r !== null && r.apply(this, arguments) || this
      //   }
      //   return e.prototype.init = function (t) {
      //     r.prototype.init.apply(this, arguments),
      //       this.legendVisualProvider = new yl(U(this.getData, this), U(this.getRawData, this)),
      //       this._defaultLabelLine(t)
      //   }
      //     ,
      //     e.prototype.mergeOption = function () {
      //       r.prototype.mergeOption.apply(this, arguments)
      //     }
      //     ,
      //     e.prototype.getInitialData = function () {
      //       return _o(this, {
      //         coordDimensions: ["value"],
      //         encodeDefaulter: nt(yg, this)
      //       })
      //     }
      //     ,
      //     e.prototype.getDataParams = function (t) {
      //       var a = this.getData()
      //         , n = r.prototype.getDataParams.call(this, t)
      //         , i = [];
      //       return a.each(a.mapDimension("value"), function (o) {
      //         i.push(o)
      //       }),
      //         n.percent = B2(i, t, a.hostModel.get("percentPrecision")),
      //         n.$vars.push("percent"),
      //         n
      //     }
      //     ,
      //     e.prototype._defaultLabelLine = function (t) {
      //       Jn(t, "labelLine", ["show"]);
      //       var a = t.labelLine
      //         , n = t.emphasis.labelLine;
      //       a.show = a.show && t.label.show,
      //         n.show = n.show && t.emphasis.label.show
      //     }
      //     ,
      //     e.type = "series.pie",
      //     e.defaultOption = {
      //     },
      //     e
      // }
    },
    // 设置
    setOptions(option) {
      // {
      //   title: {
      //     text: 'ECharts 入门示例'
      //   },
      //   tooltip: {},
      //   xAxis: {
      //     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      //   },
      //   yAxis: {},
      //   series: [{
      //     name: '销量',
      //     type: 'bar',
      //     data: [5, 20, 36, 10, 10, 20]
      //   }]
      // }
      this.chart.setOption(option)
    }
  }
}
</script>